Realizar en el siguiente HTML 5 declaraciones de estilo CSS que afecten al mismo elemento, el titilar h1, con diferentes puntuaciones de prioridad, e indicar su puntuación como un comentario en el propio HTML:
<!doctype html>
<html>
<head>
<meta charset="utf8">
<title>Herencia</title>
</head>
<body>
<div id="caja">
<header class="cabecera">
<h1>Cabecera: header</h1>
</header>
</div>
</body>
</html>
Las declaraciones de estilo CSS que afectan al mismo estilo H1 son las siguientes
/*----------1----------*/
h1 {color: Grey;}
/*
A: 0 Estilos en linea
B: 0 ID
C: 0 Clases
D: 1 Elemento
Puntuación: (0,0,0,1)
--------------------*/
/*----------2----------*/
header h1 {color: Blue;}
/*
A: 0 Estilos en linea
B: 0 ID
C: 0 Clases
D: 2 Marcas
Puntuación: (0,0,0,2)
--------------------*/
/*----------3----------*/
#caja .cabecera h1 {color: Green;}
/*
A: 0 Estilos en linea
B: 1 ID
C: 1 Clases
D: 1 Elemento
Puntuación: (0,1,1,1)
--------------------*/
/*----------4----------*/
#caja header h1 {color: Orange;}
/*
A: 0 Estilos en linea
B: 1 ID
C: 0 Clases
D: 2 Elemento
Puntuación: (0,1,0,2)
--------------------*/
A continuación se puede observar esta practica en HTML5 y CSS3 haciendo clic en las pestañas, y si desea realizar interactuar con el código para realizar simulaciones, puede hacer clic en Edit on Codeopen donde se desplegará otra ventana y comentareando parte del codigo puede observar los cambios.
See the Pen yakoZj by Jaime Ospina (@JaimeRuffus) on CodePen.